import { ref } from 'vue'
import { defineStore } from 'pinia'
import { uuid } from '@/utils/uuid'

export type ScreenType = 'PC' | 'phone'
export type CompType =
  | 'input'
  | 'input-textarea'
  | 'input-number'
  | 'radio'
  | 'checkbox'
  | 'switch'
  | 'rate'
  | 'select'
  | 'multiple-select'
  | 'cascader'
  | 'date-picker'
  | 'date-time-picker'
  | 'file-upload'
  | ''
export interface DragFn {
  dragstart: (key: CompType, e: DragEvent) => void
  dragenter: (e: DragEvent) => void
  dragover: (e: DragEvent) => void
  drop: (e: DragEvent) => void
  dragleave: (e: DragEvent) => void
}
export interface FcDesigner {
  screenType: ScreenType
  dragStatus: boolean
  formData: any[]
  model: {
    changeScreenType: (type: ScreenType) => void
    dropdown: () => void
  }
  drag: DragFn
}

export const useFcDesigner = defineStore('fcDesigner', () => {
  /* 数据：可动态渲染 */
  const screenType = ref<ScreenType>('PC') // 屏幕类型
  const dragStatus = ref(false) // 抓取状态
  const dragstartCompType = ref<CompType>('') // 拖动当前组件类型
  const formData = ref<any[]>([]) // 已拖入的数据

  /* 方法集合 */
  const model = {
    /* 切换屏幕类型 */
    changeScreenType: (type: ScreenType) => {
      screenType.value = type
    },
    /* 放下某个元素 */
    dropdown: () => {
      if (dragstartCompType.value === '') return
      const id = uuid(8)
      const defaultOptions = [
        { label: '好用', value: 0 },
        { label: '快速', value: 1 },
        { label: '高效', value: 2 },
        { label: '全能', value: 3 }
      ]

      switch (dragstartCompType.value) {
        case 'input':
          formData.value.push({
            type: 'input',
            field: 'input-' + id,
            title: '单行文本'
          })
          break
        case 'input-textarea':
          formData.value.push({
            type: 'input',
            field: 'textarea-' + id,
            title: '多行文本',
            props: {
              type: 'textarea'
            }
          })
          break
        case 'input-number':
          formData.value.push({
            type: 'input-number',
            field: 'input-number-' + id,
            title: '数值'
          })
          break
        case 'radio':
          formData.value.push({
            type: 'radio',
            field: 'radio-' + id,
            title: '单选',
            options: [
              { label: '是', value: 1 },
              { label: '否', value: 0 }
            ]
          })
          break
        case 'checkbox':
          formData.value.push({
            type: 'checkbox',
            field: 'checkbox-' + id,
            title: '复选',
            options: defaultOptions
          })
          break
        case 'switch':
          formData.value.push({
            type: 'switch',
            field: 'switch-' + id,
            title: '开关'
          })
          break
        case 'rate':
          formData.value.push({
            type: 'rate',
            field: 'rate-' + id,
            title: '评分'
          })
          break
        case 'select':
          formData.value.push({
            type: 'select',
            field: 'select-' + id,
            title: '下拉单选',
            options: defaultOptions
          })
          break
        case 'multiple-select':
          formData.value.push({
            type: 'select',
            field: 'multiple-select-' + id,
            title: '下拉复选',
            options: defaultOptions,
            props: {
              multiple: true
            }
          })
          break
        case 'cascader':
          formData.value.push({
            type: 'cascader',
            field: 'cascader-' + id,
            title: '级联选择',
            props: {
              props: { expandTrigger: 'hover' },
              options: defaultOptions.map((item) => ({ ...item, children: defaultOptions }))
            }
          })
          break
        case 'date-picker':
          formData.value.push({
            type: 'datePicker',
            field: 'date-picker-' + id,
            title: '日期'
          })
          break

        case 'date-time-picker':
          formData.value.push({
            type: 'datePicker',
            field: 'date-time-picker-' + id,
            title: '日期区间',
            props: {
              type: 'datetime'
            }
          })
          break
        // case 'file-upload':
        //   formData.value.push({
        //     type: 'fileUpload',
        //     field: 'file-upload-' + id,
        //     title: '附件'
        //   })
        //   break
      }
      dragstartCompType.value = ''
    },
    clearFormData: () => {
      formData.value = []
    }
  }

  /* 在元素上挂载拖动监听器 */
  const drag = {
    dragstart: (key: CompType) => {
      // console.log('选中了哪个组件', key)
      dragstartCompType.value = key
      dragStatus.value = true
    },
    dragenter: () => {
      // console.log('进入区域')
    },
    dragover: (e: DragEvent) => {
      // console.log('在区域内持续', e)
      e.preventDefault()
    },
    drop: () => {
      // console.log('放下')
      model.dropdown()
      dragStatus.value = false
    }
  }
  return { screenType, dragStatus, formData, drag, model }
})
